<template>
  <div class="client">
    <div class="header flex">
      <pageHeader title="客户管理">
        <div slot="btn">
          <el-button class="add-btn" @click="addClient">
            <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;新增客户
          </el-button>
          <el-button class="add-btn" @click="delClient">
            <i class="el-icon-remove"></i>&nbsp;&nbsp;删除
          </el-button>
        </div>
      </pageHeader>
    </div>
    <div class="my-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @select="selectTableList"
        @select-all="selectTableAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="客户名称"></el-table-column>
        <el-table-column prop="device_name" label="设备名称"></el-table-column>
        <el-table-column prop="device_number" label="设备数" sortable></el-table-column>
        <el-table-column prop="online_number" label="在线数" sortable></el-table-column>
        <el-table-column prop="offline_number" label="离线数" sortable></el-table-column>
        <el-table-column prop="open_time" label="开通时间"></el-table-column>
        <el-table-column prop="operating" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="button"
              size="small "
              v-if="scope.row.login_state=='0'"
            >邀请函</el-button>
            <el-button
              @click="resetPwd(scope.row)"
              type="button"
              size="small "
              v-if="scope.row.login_state=='1'"
            >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex flex-justify-center my-pagination">
      <el-pagination background layout="prev, pager, next" :total="tableData.length%10"></el-pagination>
    </div>
    <div class="my-dialog">
      <el-dialog title="新增用户" center :visible.sync="dialogVisible" width="20%">
        <div class="flex flex-justify-center" style="color:red;margin-bottom:20px;">
          <i class="el-icon-warning"></i>
          <span>请慎重填写，资料确认不可修改</span>
        </div>
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="device">
              <el-input v-model="ruleForm.device"></el-input>
            </el-form-item>
            <el-form-item label="手机号(账号)" prop="mobile">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="background:#ff7d31;border-color:#ff7d31;"
          >确认新增</el-button>
        </span>
      </el-dialog>
      <el-dialog title="邀请函" center :visible.sync="cilentInfoDialog" width="20%">
        <div class="flex flex-justify-center" style="color:red;margin-bottom:20px;">
          <i class="el-icon-warning"></i>
          <span>重要信息注意保管，客户登录后邀请函即作废</span>
        </div>
        <div style="text-align: center;">可复制邀请函放送给客户哟！</div>
        <div class="successInfo">
          <p>恭喜您已开通智能管理系统</p>
          <p>登录账号：{{tableData[tableIndex].mobile}}</p>
          <p>登录密码：{{tableData[tableIndex].pwd}}</p>
          <p>合作共赢是我们的一致的目标</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <el-button
            type="primary"
            v-clipboard:copy="message"
            v-clipboard:success="copyInfo"
            v-clipboard:error="onError"
            style="background:#ff7d31;border-color:#ff7d31;"
          >复制</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pageHeader from "@/components/pageHeader/index";
export default {
  name: "client",
  props: {},
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        device: [
          { required: true, message: "请输入设备名称", trigger: "blur" }
        ],
        mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur"
          }
        ]
      },
      tableData: [
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "100",
          online_number: "80",
          offline_number: "20",
          open_time: "2019-05-08",
          login_state: "0",
          mobile: "1313156656",
          pwd: "1131546"
        },
        {
          name: "佲家智微科技有限公司2",
          device_name: "泡悠智能机",
          device_number: "100",
          online_number: "20",
          offline_number: "20",
          open_time: "2019-05-08",
          login_state: "1",
          mobile: "1313156656",
          pwd: "1131546"
        },
        {
          name: "佲家智微科技有限公司3",
          device_name: "泡悠智能机",
          device_number: "100",
          online_number: "40",
          offline_number: "20",
          open_time: "2019-05-08",
          login_state: "0",
          mobile: "1313156656",
          pwd: "1131546"
        },
        {
          name: "佲家智微科技有限公司4",
          device_name: "泡悠智能机",
          device_number: "100",
          online_number: "90",
          offline_number: "20",
          open_time: "2019-05-08",
          login_state: "1",
          mobile: "1313156656",
          pwd: "1131546"
        },
        {
          name: "佲家智微科技有限公司5",
          device_name: "泡悠智能机",
          device_number: "100",
          online_number: "80",
          offline_number: "20",
          open_time: "2019-05-08",
          login_state: "0",
          mobile: "1313156656",
          pwd: "1131546"
        }
      ],
      dialogVisible: false,
      cilentInfoDialog: false,
      tableIndex: 0,
      deleteTableLists: [],
    };
  },
  computed: {
    message() {
      return `登录账号：${this.tableData[this.tableIndex].mobile},登录密码：${
        this.tableData[this.tableIndex].pwd
      }`;
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleClick(row) {
      console.log(row);
      this.tableIndex = row.index;
      this.cilentInfoDialog = !this.cilentInfoDialog;
    },
    addClient() {
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    delClient() {
      let tableData = this.tableData;
      this.deleteTableLists.forEach((element,index) => {
        // console.log(element);
        // this.tableData.delete(element.index);
        // delete this.tableData[element.index];
        tableData.splice(0, 1);
      });
      console.log(tableData)
      this.tableData = tableData;
    },
    selectTableList(selection, row) {
      console.log(selection, row);
      this.deleteTableLists = selection;
    },
    selectTableAll(selection) {
      console.log(selection);
      this.deleteTableLists = selection;
    },
    open() {},
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(valid);
          this.dialogVisible = false;
          let time =
            new Date().getFullYear() +
            "-" +
            (new Date().getMonth() + 1) +
            "-" +
            new Date().getDate();
          let pwd = "";
          console.log(pwd);
          this.tableIndex = this.tableData.length;
          for (let i = 0; i < 10; i++) {
            pwd = pwd + parseInt(Math.random() * 10).toString();
          }
          let item = {
            name: this.ruleForm.name,
            device_name: this.ruleForm.device,
            device_number: "100",
            online_number: "80",
            offline_number: "20",
            open_time: time,
            login_state: "0",
            mobile: this.ruleForm.mobile,
            pwd: pwd
          };
          this.tableData.push(item);
          this.cilentInfoDialog = !this.cilentInfoDialog;
          this.message = `登录账号：${
            this.tableData[this.tableIndex].mobile
          },登录密码：${this.tableData[this.tableIndex].pwd}`;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    copyInfo(e) {
      this.$message({
        message: "复制成功！",
        type: "success"
      });
    },
    onError(e) {
      console.log(e);
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex);
      row.index = rowIndex;
    },
    resetPwd(row) {
      this.open();
      this.tableIndex = row.index;
    },
    open() {
      this.$confirm(
        '<div style="color:red;">重置后客户密码将失效</div><div style="color:red;">确定要重制密码?</div>',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          center: true,
          type: "warning",
          style: "width:300px;"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "重置成功!"
          });
          let pwd = "";
          console.log(pwd);
          for (let i = 0; i < 10; i++) {
            pwd = pwd + parseInt(Math.random() * 10).toString();
          }
          this.tableData[this.tableIndex].pwd = pwd;
          this.cilentInfoDialog = !this.cilentInfoDialog;
          this.message = `登录账号：${
            this.tableData[this.tableIndex].mobile
          },登录密码：${this.tableData[this.tableIndex].pwd}`;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    pageHeader
  }
};
</script>

<style scoped lang="less">
.client {
  padding: 20px 40px;
  background: #ddd;
  .header {
    margin-bottom: 15px;
    .add-btn {
      color: #fff;
      background: #ff7d31;
      margin-left: 50px;
    }
  }
  .my-pagination {
    margin-top: 30px;
  }
  .my-dialog {
    .el-button:focus,
    .el-button:hover {
      color: #fff;
    }
    .successInfo {
      margin-top: 15px;
      padding: 10px 70px;
      background: rgba(255, 125, 49, 0.48);
      color: #000;
      box-sizing: border-box;

      p {
        margin: 10px 0;
      }
    }
  }
  .my-table {
    .el-button:focus,
    .el-button:hover {
      color: #ff7b31;
    }
  }
}
</style>
<style>
.my-pagination
  /deep/
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background: #ff7b31;
}
.my-dialog /deep/ .el-input {
  width: 80%;
}
.el-message-box {
  width: 300px;
}
</style>

